<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb">
<head>
    <meta charset="utf-8">
    <title>帮助中心表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/components/layuiadmin/layui/src/css/layui.css" media="all">
    <link rel="stylesheet" href="/components/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/modules/css/search.css" media="all">
    <script src="/components/layuiadmin/layui/src/layui.js"></script>
    <script src='/base/js/jquery-3.4.1.min.js'></script>
    <script src="/modules/js/app.js"></script>

</head>
<body>
<style>
    /*.layui-table-tips-main{display:none}*/
    /*.layui-table-tips-c{display:none}*/

    .layui-inline {
        width: 260px;
    }
</style>

<!-- 搜索 -->
<div class="searchTable">
    <div class="layui-inline">
        <label class="layui-form-label">标题:</label>
        <div class="layui-input-block">
            <input type="text" id="title" name="title" placeholder="请输入标题..." autocomplete="off" class="layui-input">
        </div>
    </div>


    <!-- <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload">搜索</button>-->
    <div class="layui-inline">
        <button class="layui-btn layui-btn-normal layui-btn-sm" data-type="reload" style="margin-bottom: 8px">
            <i class="layui-icon layui-icon-search  layuiadmin-button-btn"></i>
        </button>
    </div>
</div>

<!-- 表格 -->
<table class="auth-table" id="auth-table" lay-filter="auth-table"></table>

<!-- 分页插件 -->
<div class="page-table" id="page-table"></div>

<!-- 多删除-添加  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<!-- 每一行的数据修改或删除  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn  layui-btn-warm layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>

    // 接口
    let adminHelpFindPage = path + "/admin/xj/adminHelp/findPage";        //查询-分页
    let adminHelpDel = path + "/admin/xj/adminHelp/del";                  //删除

    // 路由
    let adminHelpPageAdd = "/page/modules_sys_xj_help_helpAdd";        // 添加弹出
    let adminHelpPageUpd = "/page/modules_sys_xj_help_helpUpd";         // 编辑弹出


    let res;       // 完整的后台数据
    var data;      // 当前行数据（弹出层时可直接parent.data获取）
    layui.use(['jquery', 'table', 'laypage'], function () {
        xijiaRenderTable();        //  数据表格 - 获取表格
        xijiaLayPage();            //  分页插件
        xijiaEventToolbar();       //  工具栏事件（多删除/添加）
        xijiaEventTool();          //  监听数据表格内按钮操作（编辑,删除等）
        xijiaEventSearch();        //  监听条件搜索
    });


    /**
     * 重载表格和加载表格
     * ---- getPage()= 获取 layui 当前分页参数 ===> 如：?current=1&size=10
     * ---- res = 后台返回的整个数据，整个页面可获取使用
     * @param params get请求的参数拼接
     *
     */
    function xijiaRenderTable(params) {
        res = Ajax.get(adminHelpFindPage + getPage() + xijiaSearchParam());
        layui.table.render({
            elem: '#auth-table'
            , data: res.data.records
            , toolbar: '#toolbarDemo'
            , title: '帮助中心表'
            , limit: res.data.size //显示的数量
            , cols: [
                [
                    {field: 'title', title: '标题'},
                    {
                        field: 'category', title: '分类', templet: function (res) {
                            return Dict.convert(Enums.Xj.HelpCategory, res.category);
                        }
                    },
                    // {type: 'checkbox', fixed: 'left'}   //fixed: 'right', , fixed: 'left'
                    //{field: 'icon', title: '图标 | 封面图'},
                    {
                        field: 'helpVersion', title: '版本', templet: function (res) {
                            return Dict.convert(Enums.Xj.HelpVersion, res.helpVersion);
                        }
                    },
                    {field: 'createTime', title: '创建时间'},
                    {field: 'sort', title: '排序'},
                    {field: 'browseNum', title: '浏览量'}
                    , {title: '操作', toolbar: '#barDemo', width: 250}
                ]
            ]
        });
    }

    /**
     * 分页配置, 数据总数会在下一次点击事更新上一次数据库的总数量
     * @author ws
     * @mail  1720696548@qq.com
     * @param result 后台返回数据, 用于第一此加载总数据
     * @date  2020/4/22 0022 1:18
     * @return
     */
    function xijiaLayPage() {
        layui.laypage.render({
            // 注意，这里的 page-table 是 ID，不用加 # 号
            elem: 'page-table'
            , count: res.data.total    // 数据总数，从服务端得到
            , limit: res.data.size     // 每页数量
            // 基础信息配置
            , layout: pageJson.layout
            , curr: pageJson.curr
            , limits: pageJson.limits
            , groups: pageJson.groups
            , prev: pageJson.prev
            , next: pageJson.next
            // 监听 obj包含了当前分页的所有参数， 比如： obj.curr =当前页, obj.limit = 每页显示条数
            , jump: function (obj, first) {
                //首次不执行, 第一次加载时 first=true
                if (first) {
                    return;
                }
                // 刷新表格
                xijiaRenderTable();
            }
        });


    }


    /**
     * 工具栏事件（多删除 || 添加）  ==>> toolbar(auth-table): toolbar=监听表格头事件,  auth-table=数据表格elem 名称
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:05
     * @return
     */
    function xijiaEventToolbar() {
        layui.table.on('toolbar(auth-table)', function (obj) {
            //添加
            if (obj.event === "add") {
                // 使用新窗口
                window.open(adminHelpPageAdd);
                //  Pop.tipsWindown(adminHelpPageAdd, "90%", "90%", "添加");
            }
        });
    }

    /**
     * 监听数据表格内按钮（编辑 || 删除 || 其他）, tool(auth-table)==> tool =监听按钮， auth-table=数据表格elem对应值
     * @author ws
     * @mail  1720696548@qq.com
     * @param null
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventTool() {
        layui.table.on('tool(auth-table)', function (obj) {
            data = obj.data;  //当前行数据
            //编辑
            if (obj.event === 'edit') {
                // 使用新窗口
                window.open(adminHelpPageUpd + "?id=" + data.id);
                // Pop.tipsWindown(adminHelpPageUpd, "90%", "90%", "修改");
            }
            //删除
            if (obj.event === 'del') {
                let params = "?id=" + data.id;
                Pop.tipsDeleteId(adminHelpDel + params, obj);
            }
        });
    }

    /**
     * 条件搜索，重载数据
     * @author ws
     * @mail  1720696548@qq.com
     * @date  2020/4/10 0010 0:03
     * @return
     */
    function xijiaEventSearch() {
        let $ = layui.$, active = {
            //搜索
            reload: function () {
                // 重置到第一页
                $(".layui-laypage-skip .layui-input").val(1);
                // 重载-数据表格(带所有查询参数)
                xijiaRenderTable();
                // 重载后-刷新分页数据
                xijiaLayPage();
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    }


    /**
     * 搜索参数
     * @author wangsong
     * @date 2020/8/23 0023 22:53
     * @return
     * @version 1.0.0
     */
    function xijiaSearchParam() {
        let params = "";
        params += "&title=" + $("#title").val();
        return params;
    }

    //
    // /***
    //  * 显示省略内容
    //  * @author wangsong
    //  * @mail  1720696548@qq.com
    //  * @date  2020/10/27 0027 19:22
    //  * @version 1.0.0
    //  */
    // function showOmittedContent() {
    //     $("td").mouseover(function () {
    //         //js主要利用offsetWidth和scrollWidth判断是否溢出。
    //         //在这里scrollWidth是包含内容的完全高度，offsetWidth是当前表格单元格的宽度。
    //         // 当前完整
    //         let that = this;
    //         let text = $(this).text();
    //         window.layer.tips(text, that, {
    //             // area: ['500px', 'auto'],
    //             tips: [1, '#03020a'],
    //             time: 2000
    //         });
    //     });
    // }
</script>
</body>
</html>
